<template>
  <div meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <span style="color: burlywood;font-size: 25px" >{{mname}}</span>
          <!--商品图片-->
            <div class="H_picture">
              <img :src="good.gimg" alt=" " width="200px" height="210px">
            </div>
          <!--商品价格,名称,库存-->
            <div class="H_goods">
            <div class="H_price">
                  <font size="4" color="orange">￥{{good.price}}</font>
                  <font size="2" color="#708090">价格</font><br/>
            </div>
            <div class="H_head">
                  <font size="3" color="black">{{good.gname}}</font>
            </div>
            <div class="H_stock">
                 <font size="3" color="black">库存:{{good.ginventory}}</font>
            </div>
          </div>

          <!--商品详情-->
            <div class="H_message">
              <h4 align="left">商品详情:</h4>
              {{good.gdescribe}}
            </div>
          <!--按钮-->
            <div  class="H_but">
              <img type="image" id="H_collection"
                  :src="collectionURL" alt="此处为收藏按钮"
                  height="70px"  @click="collect(good.gid)"
             />
            <!--店铺按钮-->
              <img type="image" id="shop"
                   src="../assets/img/shop.jpg" alt="此处为店铺按钮"
                   height="70px"
                   @click="toMerchantGood(good.mid)"
              />
            </div>
          <!--立即购买按钮-->
            <div>
              <input type="button" value="立即购买" class="Hbtn" @click="buyGood(good)">
            </div>
  </div>

</template>
<script>
import {selectGood,checkSelect,deleteCollect,findMerchantName} from '@/api/user'

export default {
    name: 'GoodDetail',
          data() {
            return{
              flag: 0,
              collectionURL:'../../static/collection1.jpg',
              good: {
                gid:'',
                mid:'',
                price: '',
                gimg: '',
                gdescribe:'',   //商品详情
                ginventory:'', //库存
                mname:'',   //商家名，方便携带数据
              },
              mname:'', //商家名，单独用来展示
            }
          },
          methods: {
            //初始时判断用户是否收藏过该商品，如果收藏过，图片变为已收藏，否则图片显示未收藏
            sout() {
              checkSelect({
                uid: this.$store.state.user.uid,
                gid: this.good.gid,
              }).then((res)=>{
                //如果返回来的状态码为200，代表已经收藏过了，图片变为已收藏，标志的flag变为1
                if (res.data.code===200){
                  this.collectionURL='../../static/collection2.jpg'
                  this.flag=1;
                }else {//否则是没有收藏过，标志位flag置为0
                  this.collectionURL='../../static/collection1.jpg'
                  this.flag=0;
                }
              }).catch(res=>{
                alert("失败了")
              })
           },
            //收藏方法
            collect (gid) {
              //如果状态码为0，则未收藏过，点击调用收藏API
              if (this.flag === 0) {
                selectGood({
                  uid: this.$store.state.user.uid,
                  gid: gid,
                }).then(res => {
                  //如果返回的状态码为200，则收藏成功,将状态码置为1，图片替换为收藏成功的图片
                  if (res.data.code===200){
                    this.collectionURL='../../static/collection2.jpg'
                    this.flag=1;
                  }
                }).catch((res) => {
                  alert('收藏失败')
                })
              }
              //否则状态码为1，收藏过，点击调用取消收藏API
              else {
                deleteCollect({
                  uid:this.$store.state.user.uid,
                  gid:gid,
                }).then(res => {
                  //如果返回的状态码为200，则取消收藏成功,将状态码置为0，图片替换为未收藏的图片
                  if (res.data.code===200){
                    this.collectionURL='../../static/collection1.jpg'
                    this.flag=0;
                  }
                }).catch((res) => {
                  alert('收藏失败')
                })
              }
            },
            //查询商家名
            findMerchantNameByMid(mid){
              findMerchantName({
                mid:mid,
              }).then(res=>{
                this.mname=res.data.data //为商家名赋值
                this.good.mname=this.mname
              }).catch(res=>{
                alert("出错了，请重试")
              })
            },
            //购买方法
            buyGood(good){
              if (good.ginventory>0){
                this.$router.replace({
                  path: '/NewOrder',
                  query:{
                    good: good,
                  }
                })
              }else {
                this.$message.error("库存不足，无法购买");
              }

            },
            //前往商家商品列表
            toMerchantGood(mid){
              this.$router.replace({
                path:'/MerchantGood',
                query:{
                  mid:mid,
                }
              })
            }
          },
          created () {
            this.good=this.$route.query.good;
            //查询商家名
            this.findMerchantNameByMid(this.good.mid);
            //判断是否收藏过某商品
            this.sout();
          }
  }
</script>


<style scoped>
          .H_picture{
              position: absolute;
              top: 6%;
              left: 8%;
              width: 260px;
              height: 210px;
              border: 1px solid #666;
          }.H_price{
               position: absolute;
               top: 42%;
          }.H_head{
                  position: absolute;
                  top: 48%;
                  font-family: Arial;
          }.H_stock{
                  position: absolute;
                  top: 54%;
                  font-family: Arial;
           }.H_message{
                  position: absolute;
                  top: 58%;
                  background-color:whitesmoke;
                  color:black;
                  width: 98%;
                  height: 150px;
                  border:0;
                  border-radius: 10px;
                  opacity:0.7;
           }.H_but{
                   position: absolute;
                   top: 82%;
          }.Hbtn{
                    position: absolute;
                    top: 84%;
                    left: 48%;
                    background-color:orangered;
                    color:whitesmoke;
                    width: 150px;
                    height: 50px;
                    border:0;
                    border-radius: 30px;
                    opacity:0.7;
        }
</style>
